<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i>查看用户详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div >
                <div v-if="PersonalData.userAddress">
                    <p class="details-nicheng">{{UserDetailsData.nickName}}</p>
                    <p class="details">{{PersonalData.consignee}} / {{PersonalData.phone}}</p>
                    <p class="details">所属区域：{{PersonalData.region}}</p>
                    <p class="details">最近一次编辑的收货地址：</p>
                    <p class="details">{{PersonalData.userAddress}}</p>
                </div>
                <div v-else>该用户未填写地址或未中奖</div>
                <div class="details-top"> 
                    <span>发起抽奖次数：{{UserDetailsData.sponsorCount}}</span>
                    <span>参与抽奖次数：{{UserDetailsData.lotteryCount}}</span>
                    <span>中奖次数：{{UserDetailsData.wonCount}}</span>
                </div>
            </div>

            <el-tabs v-model="tabName" @tab-click="tabClick">
                <el-tab-pane label="全部" name="1"></el-tab-pane>
                <el-tab-pane label="发起抽奖" name="2"></el-tab-pane>
                <el-tab-pane label="参与抽奖" name="3"></el-tab-pane>
                <el-tab-pane label="中奖纪录" name="4"></el-tab-pane>
            </el-tabs>
            <el-table :data="luckDraw" border style="width: 100%" ref="multipleTable">
                    <el-table-column prop="prizes" label="奖品"  align="center" :formatter="prizes">
                    </el-table-column>
                    <el-table-column prop="prizes" label="数量" align="center" :formatter="num">
                    </el-table-column>
                    <el-table-column prop="ruleType" label="开奖方式" align="center" :formatter="ruleType">
                    </el-table-column>
                    <el-table-column prop="joinNum" label="参与人数" align="center" >
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center" :formatter="status">
                    </el-table-column>
                    <el-table-column prop="createByName" label="抽奖发起人" align="center" :formatter="createByName">
                    </el-table-column> 
                    <el-table-column prop="isWon" label="是否中奖" align="center" :formatter="isWon">
                    </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :current-page="currentPage"
                    :page-sizes="[10,15,20]"
                    :page-size=pageSize
                    :total=total>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';
import axios from 'axios';
import { getUserDetails,getPersonalLuckDraw,getLuckDrasData } from '../../components/api/user.js';
    export default {
        name: 'luckDrawDetails',
        data() {
            return {
                userId:JSON.parse(localStorage.getItem('sysUser')),
                PersonalData:{},
                UserDetailsData:{},
                luckDraw:[],
                form:{
                    expNum:'',
                    expCompany:''
                },
                tabName:'1',
                pageSize:10,
                total:0,
                currentPage:1
            }
        },   
        created(){
           
            this.userDetails();
            this.personalLuckDraw();
            this.luckDrawData();
        },
        methods: { 
            //获取详情信息
             userDetails(){
                let that = this;
                let params = {
                    id:this.$route.params.id
                }
                let Base64 = require('js-base64').Base64;
                getUserDetails(params).then((res)=>{
                    console.log(res);
                    if(res.status == 200){
                        console.log(res.data);
                        res.data.nickName = Base64.decode(res.data.nickName);
                        that.UserDetailsData = res.data;

                    }
                }).catch((err)=>{
                    console.log(err);
                });               
             },
             //用户抽奖信息
             personalLuckDraw(){
                 let params = {
                    id:this.$route.params.id
                }
                let that = this;
                getPersonalLuckDraw(params).then((res)=>{
                    if(res.status == 200){
          
                        let region = res.data.userAddress.split(' ');
                        res.data.region = region[0] +' '+ region[1] +' '+ region[2];
                        that.PersonalData = res.data;
                        
                    }
                    // console.log(res);
                }).catch((err)=>{
                    console.log('-------------');
                    console.log(that.PersonalData);
                    console.log(err);
                });
             },

             //用户抽奖数据
             luckDrawData(){
                 let params = {
                     id:this.$route.params.id,
                     searchType:this.tabName,
                     pageNum:this.currentPage,
                     pageSize:this.pageSize
                 }
                 let that = this;
                 getLuckDrasData(params).then((res)=>{
                     if(res.status == 200){
                         that.luckDraw = res.data.list
                         that.total = res.data.total
                     }
                     console.log(that.luckDraw);
                 }).catch((err)=>{
                     console.log(err);
                 });
             },

             handleSizeChange(val){
                this.pageSize = val;
                this.luckDrawData();
             },
             handleCurrentChange(val){
                 this.currentPage = val;
                this.luckDrawData();
             },

             isWon(row){
                 if(row.isWon == 0){
                     return '否'
                 }else{
                     return '是'
                 }
             },
             num(row){
                 
                for(let i=0,len = row.prizes.length;i<len;i++){
                    return row.prizes[i].count;
                }
             },
             ruleType(row){
                 
                if(row.ruleType == 1){
                    return '自动开奖'
                }else{
                    return '2天内到达指定人数自动开奖'
                }
             },
             status(row){
                 
                if(row.status == 1){
                    return '未开奖'
                }else if(row.status == 2){
                    return '已开奖'
                }else{
                    return '已失效'
                }
             },
             createByName(row){
                let Base64 = require('js-base64').Base64;
                return Base64.decode(row.createByName);
             },
             prizes(row){
                 for(let i=0,len = row.prizes.length;i<len;i++){
                    return row.prizes[i].prizeName;
                }
             },
             nickName(row){
                 let Base64 = require('js-base64').Base64;
                 if(!row.nickName){
                     return '暂无'
                 }else{
                    return Base64.decode(row.nickName);
                 }
             },

             //选项卡
             tabClick(tab,event){
                 console.log(tab.name);
                 console.log('----------');
                 if(tab.name == 3){
                     this.tabName = '1'
                 }else{
                    this.tabName = tab.name;
                 }
                this.luckDrawData();
                 console.log(this.tabName);
             },
             submit(index,row,column,store){
                 console.log(row);
                 console.log(index);
                 console.log(column);
                 console.log(store);
                //  this.$refs[formName].validate((valid) => {
                //      console.log(valid);
                //      if(valid){
                //         var params = {
                //             activityId:this.$route.params.id,
                //             userId:this.userId.id,
                //             expNum:this.form.expNum,
                //             expCompany:this.form.expCompany,
                //         }

                //         //发货
                //         deliverGoods(params).then((res)=>{
                //             console.log(res);
                //         }).catch((err)=>{
                //             console.log(err);
                //         });
                //      }
                //  });
             }
        }
    }

</script>

<style scoped>
    .details-nicheng{
       height:50px;
       line-height: 50px; 
       border-bottom:1px #f0f0f0 solid;
        margin-bottom: 14px;
    }
    .details-top{
        height:50px;
        line-height: 50px;
        margin-top:20px;
    }
   .details{
       height:30px;
       line-height: 30px;
   }
    .details-top>span{
       margin-right:70px;
   }
   .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
       margin-bottom:0px;
   }
</style>
